<template>
    <div v-if="url">
        <video ref="player-container-id" width="500" height="300" preload="auto" playsinline webkit-playsinline>
        </video>
    </div>
</template>
<script>
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';
export default {
    name: "KanKeTextbookMaterialPreviewVideo",
    props: {
        file_id: {
            type: String,
            default: ''
        },
        url: {
            type: String,
            default: ''
        },
        sign: {
            type: String,
            default: ''
        }
    },
    mounted() {
        const player = new TCPlayer(this.$refs['player-container-id'], {
            // fileID: this.file_id,
            sources: [{
                src: this.url
            }],
            appID: '1500029905',
            sign: this.sign,
            licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1251993779_1/v_cube.license'
        });
    }
}
</script>
<style lang="scss" scoped>
::v-deep .video-js .vjs-big-play-button {
    // 绝对定位 元素居中
    left: 68%;
    top: 73%;
    transform: translate(-50%, -50%);

}

// ::v-deep .tcp-skin .vjs-big-play-button {

// }
::v-deep .tcp-skin .vjs-big-play-button .vjs-button-icon {
    height: 2.5rem;
    width: 5.4rem;
}
</style>